<template lang="html">
  <div class="search" ref="search" :class="{'active': changeColor}">
    <a class="iconfont icon-shouye15 search-btn" href="javascript:void(0);"></a>
    <input type="text" class="search-input">
    <a class="iconfont icon-shouye30 search-btn" href="javascript:void(0);"></a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeColor: false
    }
  },
  mounted() {
    let self = this;
    let search = self.$refs["search"];
    let searchTop = search.offsetTop;
    window.addEventListener("scroll", function() {
      if(window.pageYOffset > searchTop) {
        if(!self.changeColor) {
          self.changeColor = true;
        }
      } else {
        if(self.changeColor) {
          self.changeColor = false;
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  width: 100%;
  height: px2rem(70);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: background-color .5s;
  &.active {
    background-color: $green;
  }
  .search-input {
    width: px2rem(524);
    height: px2rem(50);
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .8);
  }
  .search-btn {
    color: $white;
    font-size: px2rem(40);
    padding: 0 px2rem(36);
  }
}
</style>
